<template>
  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-card>
        <div class="ant-transfer"
             style="display: flex;align-items: stretch;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
          <div class="ant-transfer-list" style="min-height: 400px;flex: 0 0 32%">
            <div class="ant-transfer-list-header">
              <span class="ant-transfer-list-header-selected">
                <span>一级菜单</span>
                <span class="ant-transfer-list-header-title">
                  <a-button type="link" size="small" @click="preToUpdateTypeOrder(0,typeTreeList)" v-if="!updateTypeOrder.editState[0]">调整顺序</a-button>
                  <a-button type="link" size="small" @click="toShowAddModal(1)" v-if="!updateTypeOrder.editState[0]">添加</a-button>
                  <a-button type="link" size="small" @click="toSubmitOrder" v-if="updateTypeOrder.editState[0]">提交</a-button>
                  <a-button type="link" size="small" @click="updateTypeOrder.editState=[false,false,false]" v-if="updateTypeOrder.editState[0]">取消</a-button>
                </span>
              </span>
            </div>
            <div class="ant-transfer-list-body">
              <div class="ant-transfer-list-body-customize-wrapper" style="padding: 10px;" v-if="(updateTypeOrder.editState[2]||updateTypeOrder.editState[1])&&!requesting">
                <a-skeleton :paragraph="{ rows: 4 }" active />
              </div>
              <div class="ant-transfer-list-body-customize-wrapper" v-else-if="typeTreeList!=null&&typeTreeList.length>0">
                <div class="LazyLoad is-visible selection" v-for="(level1,index) in (updateTypeOrder.editState[0]?updateTypeOrder.data:typeTreeList)" style="height: 32px;" @click="toSelection(level1)" :class="(selection[level1.level-1]!=null&&selection[level1.level-1].id===level1.id)?['is-selection']:[]">
                  <li class="ant-transfer-list-content-item" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
                    <span class="ant-transfer-list-content-item-text">
                      <span class="custom-item">{{level1.type}}</span>
                    </span>
                    <span>
                      <a-button type="link" size="small" @click="toShowUpdateModal(level1)" v-if="!updateTypeOrder.editState[0]">修改</a-button>
                      <a-button type="link" size="small" @click="toShowDeleteModal(level1.id)" v-if="!updateTypeOrder.editState[0]">删除</a-button>
                      <a-button type="link" size="small" @click="toUp(index)" v-if="updateTypeOrder.editState[0]" :disabled="index===0">↑</a-button>
                      <a-button type="link" size="small" @click="toDown(index)" v-if="updateTypeOrder.editState[0]" :disabled="index===updateTypeOrder.data.length-1">↓</a-button>
                    </span>
                  </li>
                </div>
              </div>
              <div class="ant-transfer-list-body-not-found" v-else>
                <div class="ant-empty ant-empty-normal ant-empty-small">
                  <div class="ant-empty-image">
                    <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                      <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                        <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                        <g fillRule="nonzero" stroke="#D9D9D9">
                          <path
                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                          <path
                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                            fill="#FAFAFA"></path>
                        </g>
                      </g>
                    </svg>

                  </div>
                  <p class="ant-empty-description">暂无数据或未选择父级</p></div>
              </div>

            </div>
          </div>
          <div class="ant-transfer-list" style="min-height: 400px;flex: 0 0 32%">
            <div class="ant-transfer-list-header">
              <span class="ant-transfer-list-header-selected">
                <span>二级菜单</span>
                <span class="ant-transfer-list-header-title">

                  <a-button type="link" size="small" @click="preToUpdateTypeOrder(1,selection[0].children)" v-if="!updateTypeOrder.editState[1]">调整顺序</a-button>
                  <a-button type="link" size="small" @click="toShowAddModal(2)" v-if="!updateTypeOrder.editState[1]">添加</a-button>
                  <a-button type="link" size="small" @click="toSubmitOrder" v-if="updateTypeOrder.editState[1]">提交</a-button>
                  <a-button type="link" size="small" @click="updateTypeOrder.editState=[false,false,false]" v-if="updateTypeOrder.editState[1]">取消</a-button>
                </span>
              </span>
            </div>
            <div class="ant-transfer-list-body">
              <div class="ant-transfer-list-body-customize-wrapper" style="padding: 10px;" v-if="(updateTypeOrder.editState[0]||updateTypeOrder.editState[2])&&!requesting">
                <a-skeleton :paragraph="{ rows: 4 }" active />
              </div>
              <div class="ant-transfer-list-body-customize-wrapper" v-else-if="selection[0]!=null&&selection[0].children!=null&&selection[0].children.length>0">
                <div class="LazyLoad is-visible selection" v-for="(level2,index) in (updateTypeOrder.editState[1]?updateTypeOrder.data:selection[0].children)" style="height: 32px;" @click="toSelection(level2)" :class="(selection[level2.level-1]!=null&&selection[level2.level-1].id===level2.id)?['is-selection']:[]">
                  <li class="ant-transfer-list-content-item" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
                    <span class="ant-transfer-list-content-item-text">
                      <span class="custom-item">{{level2.type}}</span>
                    </span>
                    <span>
<!--                      <a-button type="link" size="small" @click="toShowUpdateModal(level2)" :disabled="updateTypeOrder.editState[1]">edit</a-button>-->
<!--                      <a-button type="link" size="small" @click="toShowDeleteModal(level2.id)" :disabled="updateTypeOrder.editState[1]">delete</a-button>-->


                      <a-button type="link" size="small" @click="toShowUpdateModal(level2)" v-if="!updateTypeOrder.editState[1]">修改</a-button>
                      <a-button type="link" size="small" @click="toShowDeleteModal(level2.id)" v-if="!updateTypeOrder.editState[1]">删除</a-button>
                      <a-button type="link" size="small" @click="toUp(index)" v-if="updateTypeOrder.editState[1]" :disabled="index===0">↑</a-button>
                      <a-button type="link" size="small" @click="toDown(index)" v-if="updateTypeOrder.editState[1]" :disabled="index===updateTypeOrder.data.length-1">↓</a-button>
                    </span>
                  </li>
                </div>
              </div>
              <div class="ant-transfer-list-body-not-found" v-else>
                <div class="ant-empty ant-empty-normal ant-empty-small">
                  <div class="ant-empty-image">
                    <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                      <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                        <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                        <g fillRule="nonzero" stroke="#D9D9D9">
                          <path
                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                          <path
                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                            fill="#FAFAFA"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <p class="ant-empty-description">暂无数据或未选择父级</p></div>
              </div>
            </div>
          </div>
          <div class="ant-transfer-list" style="min-height: 400px;flex: 0 0 32%">
            <div class="ant-transfer-list-header">
              <span class="ant-transfer-list-header-selected">
                <span>三级菜单</span>
                <span class="ant-transfer-list-header-title">


                  <a-button type="link" size="small" @click="preToUpdateTypeOrder(2,selection[1].children)" v-if="!updateTypeOrder.editState[2]">调整顺序</a-button>
                  <a-button type="link" size="small" @click="toShowAddModal(3)" v-if="!updateTypeOrder.editState[2]">添加</a-button>
                  <a-button type="link" size="small" @click="toSubmitOrder" v-if="updateTypeOrder.editState[2]">提交</a-button>
                  <a-button type="link" size="small" @click="updateTypeOrder.editState=[false,false,false]" v-if="updateTypeOrder.editState[2]">取消</a-button>
                </span>
              </span>
            </div>
            <div class="ant-transfer-list-body">
              <div class="ant-transfer-list-body-customize-wrapper" style="padding: 10px;" v-if="(updateTypeOrder.editState[0]||updateTypeOrder.editState[1])&&!requesting">
                <a-skeleton :paragraph="{ rows: 4 }" active />
              </div>
              <div class="ant-transfer-list-body-customize-wrapper" v-else-if="selection[1]!=null&&selection[1].children!=null&&selection[1].children.length>0">
                <div class="LazyLoad is-visible selection" v-for="(level3,index) in (updateTypeOrder.editState[2]?updateTypeOrder.data:selection[1].children)" style="height: 32px;" @click="toSelection(level3)" :class="(selection[level3.level-1]!=null&&selection[level3.level-1].id===level3.id)?['is-selection']:[]">
                  <li class="ant-transfer-list-content-item" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
                    <span class="ant-transfer-list-content-item-text">
                      <span class="custom-item">{{level3.type}}</span>
                    </span>
                    <span>
<!--                      <a-button type="link" size="small" @click="toShowUpdateModal(level3)" :disabled="updateTypeOrder.editState[2]">edit</a-button>-->
<!--                      <a-button type="link" size="small" @click="toShowDeleteModal(level3.id)" :disabled="updateTypeOrder.editState[2]">delete</a-button>-->


                      <a-button type="link" size="small" @click="toShowUpdateModal(level3)" v-if="!updateTypeOrder.editState[2]">修改</a-button>
                      <a-button type="link" size="small" @click="toShowDeleteModal(level3.id)" v-if="!updateTypeOrder.editState[2]">删除</a-button>
                      <a-button type="link" size="small" @click="toUp(index)" v-if="updateTypeOrder.editState[2]" :disabled="index===0">↑</a-button>
                      <a-button type="link" size="small" @click="toDown(index)" v-if="updateTypeOrder.editState[2]" :disabled="index===updateTypeOrder.data.length-1">↓</a-button>
                    </span>
                  </li>
                </div>
              </div>
              <div class="ant-transfer-list-body-not-found" v-else>
                <div class="ant-empty ant-empty-normal ant-empty-small">
                  <div class="ant-empty-image">
                    <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                      <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                        <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                        <g fillRule="nonzero" stroke="#D9D9D9">
                          <path
                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                          <path
                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                            fill="#FAFAFA"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <p class="ant-empty-description">暂无数据或未选择父级</p></div>
              </div>
            </div>
          </div>

        </div>
      </a-card>
      <a-modal
        :visible="state.showAddModal"
        @ok="toAddType"
        @cancel="state.showAddModal=false"
      >
        <a-row type="flex" justify="center" align="top">
          <a-col :span="18">
            <a-form layout="horizontal">
              <a-form-item style="margin-top: 10px"></a-form-item>

              <a-form-item label="分类名称"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.addOrUpdateTypeInfo.type"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="描述"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.addOrUpdateTypeInfo.description"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-modal>
      <a-modal
        :visible="state.showUpdateModal"
        @ok="toEditType"
        @cancel="state.showUpdateModal=false"
      >
        <a-row type="flex" justify="center" align="top">
          <a-col :span="18">
            <a-form layout="horizontal">
              <a-form-item style="margin-top: 10px"></a-form-item>

              <a-form-item label="分类名称"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.addOrUpdateTypeInfo.type"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item label="描述"
                           :label-col="{span: 6}"
                           :wrapper-col="{ span: 18 }"
              >
                <a-input-group size="large">
                  <a-row>
                    <a-col>
                      <a-input v-model="state.addOrUpdateTypeInfo.description"/>
                    </a-col>
                  </a-row>
                </a-input-group>
              </a-form-item>
              <a-form-item :label-col="{span: 6}"
              :wrapper-col="{ span: 18 }" >
                <template #label>
                  <div
                    style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                    图片
                    <a-tooltip placement="right">
                      <template slot="title">
                        格式：png、jpeg、jpg<br/>
                        尺寸：300px * 300px
                      </template>
                      <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                    </a-tooltip>
                  </div>
                </template>
                <a-upload
                  list-type="picture-card"
                  :file-list="state.addOrUpdateTypeInfo.photo==null?[]:[{name: 1, uid: -1,status: 'done',url: state.addOrUpdateTypeInfo.photo}]"
                  :custom-request="handleUploadMainImage"
                  @change="handleMainImageChange"
                  @preview="openModal"
                >
                  <div v-if="state.addOrUpdateTypeInfo.photo==null">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">
                      Upload
                    </div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-modal>
      <a-modal v-model:visible="showPhotoData.state" :closable="false" :footer="null">
        <img alt="example" style="width: 100%" :src="showPhotoData.data" />
      </a-modal>
    </div>
  </page-header-wrapper>
</template>

<script>
import {addType, deleteTypeById, searchType, searchTypeAsTree, updateTypeById,updateTypeOrderByIds} from "@/api/modules/TypeRequest";
import {uploadPhoto} from "@/api/image";

export default {
  name: "TypeController",
  data() {
    return {
      state: {
        showAddModal: false,
        addOrUpdateTypeInfo: {},
        showUpdateModal: false,
      },
      requesting:false,
      showPhotoData:{
        data:{

        },
        state:false,
      },
      updateTypeOrder:{
          data:null,
          editState:[false,false,false]
      },
      selection: [null,null,null],
      typeTreeList: []
    }
  },
  mounted() {
    this.toSearchType();
  },
  methods: {
    preToUpdateTypeOrder(num,data){
      if(data==null)data=[]
      this.updateTypeOrder.data=JSON.parse(JSON.stringify(data))
      this.updateTypeOrder.editState=[num===0,num===1,num===2]
    },
    async toSubmitOrder(){
      let data={};
      data.ids=this.updateTypeOrder.data.map((val)=>{
        return val.id
      })
      await updateTypeOrderByIds(data);
      this.toSearchType();
      this.updateTypeOrder.editState=[false,false,false];
      this.updateTypeOrder.data=null;
    },
    toUp(index){
      let aaa=JSON.parse(JSON.stringify(this.updateTypeOrder.data[index]))
      this.updateTypeOrder.data[index]=this.updateTypeOrder.data[index-1]
      this.updateTypeOrder.data[index-1]=aaa;
    },
    toDown(index){
      let aaa=JSON.parse(JSON.stringify(this.updateTypeOrder.data[index]))
      this.updateTypeOrder.data[index]=this.updateTypeOrder.data[index+1]
      this.updateTypeOrder.data[index+1]=aaa;
    },
    async toSearchType() {
      let _this = this;
      if(this.requesting)return;
      this.requesting=true;
      await searchTypeAsTree().then((res) => {
        if (res.status === 200) {
          _this.typeTreeList = res.data;
          if(_this.selection[0]!=null){
            let isFind1=false;
            for (let i = 0; i < res.data.length; i++) {
              if(_this.selection[0].id===res.data[i].id){
                _this.selection=[res.data[i],_this.selection[1],_this.selection[2]]
                isFind1=true;
                break;
              }
            }
            if(!isFind1){
              _this.selection=[null,null,null]
            }
          }
          if(_this.selection[1]!=null){
            let isFind2=false;
            for (let j = 0; j < _this.selection[0].children.length; j++) {
              if(_this.selection[1].id===_this.selection[0].children[j].id){
                _this.selection=[_this.selection[0],_this.selection[0].children[j],_this.selection[2]]
                isFind2=true;
                break;
              }
            }
            if(!isFind2){
              _this.selection=[_this.selection[0],null,null]
            }
          }
          if(_this.selection[2]!=null){
            let isFind3=false;
            for (let k = 0; k < _this.selection[1].children.length; k++) {
              if(_this.selection[1].id===_this.selection[1].children[k].id){
                _this.selection=[_this.selection[0],_this.selection[1],_this.selection[1].children[k].id]
                isFind3=true;
                break;
              }
            }
            if(!isFind3){
              _this.selection=[_this.selection[0],_this.selection[1],null]
            }
          }
          _this.requesting=false
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      }).catch((res) => {
        _this.$notification.warning({
          message: res.message
        })
      })
    },
    toSelection(data){
      if(data.level==1){
        this.selection=[data,null,null]
      }
      if(data.level==2){
        this.selection=[this.selection[0],data,null];
      }
      if(data.level==3){
        this.selection=[this.selection[0],this.selection[1],data];
      }
    },
    toShowAddModal( level) {
      if(level>1&&this.selection[level-2]==null){
        this.$notification.warning({
          message:'请选择其父级'
        })
      }else {
        this.state.addOrUpdateTypeInfo = JSON.parse(JSON.stringify({
          parentId:(level===1||this.selection[level-2]==null)?null:this.selection[level-2].id,
          level,
          description: '',
          type: ''
        }))
        this.state.showAddModal = true;
      }
    },
    toShowUpdateModal(data) {
      this.state.addOrUpdateTypeInfo = JSON.parse(JSON.stringify(data))
      this.state.showUpdateModal = true;
    },
    toShowDeleteModal(id) {
      let _this=this;
      this.$confirm({
        content: '确定删除该类型？',
        async onOk() {
          deleteTypeById(id).then((res) => {
            if(res.status==200){
              _this.$notification.success({
                message:'删除成功'
              })
            }else {
              _this.$notification.warning({
                message:res.message
              })
            }
          }).catch((res)=>{
            _this.$notification.warning({
              message:res.message
            })
          }).finally(()=>{
            _this.toSearchType();
          })
        }
      })
    },
    async toAddType(){
      let _this=this;
      if(this.state.addOrUpdateTypeInfo.type!=null&&this.state.addOrUpdateTypeInfo.type.trim().length>0){
        await addType(this.state.addOrUpdateTypeInfo).then((res)=>{
          if(res.status==200){
            _this.$notification.success({
              message: '操作成功'
            })
            _this.state.showAddModal=false;
          }else {
            _this.$notification.warning({
              message: res.message
            })
          }
        }).catch((res) => {
          _this.$notification.warning({
            message: res.message
          })
        }).finally(()=>{
          _this.toSearchType();
        })
      }else{
        this.$notification.warning({
          message:'请输入分类名称'
        })
      }
    },
    handleMainImageChange({fileList}) {
      if (fileList.length == 0) {
        this.state.addOrUpdateTypeInfo.photo=null
      } else {
        this.state.addOrUpdateTypeInfo.photo=fileList[0].url
      }
    },
    handleUploadMainImage(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        _this.state.addOrUpdateTypeInfo.photo = res.data
      })
    },
    async toEditType(){
      let _this=this;
      if(this.state.addOrUpdateTypeInfo.type!=null&&this.state.addOrUpdateTypeInfo.type.trim().length>0){
        await updateTypeById(this.state.addOrUpdateTypeInfo).then((res)=>{
          if(res.status==200){
            _this.$notification.success({
              message: '操作成功'
            })
            _this.state.showUpdateModal=false;
          }else {
            _this.$notification.warning({
              message: res.message
            })
          }
        }).catch((res) => {
          _this.$notification.warning({
            message: res.message
          })
        }).finally(()=>{
          _this.toSearchType();

        })
      }else{
        this.$notification.warning({
          message:'请输入分类名称'
        })
      }

    },
    async openModal(record) {
      this.showPhotoData.data = record.url;
      this.showPhotoData.state = true;
    },
  },
  computed:{
    loading(){
      return [
        this.requesting[0]||this.updateTypeOrder.editState[1]||this.updateTypeOrder.editState[2],
        this.requesting[1]||this.updateTypeOrder.editState[0]||this.updateTypeOrder.editState[2],
        this.requesting[2]||this.updateTypeOrder.editState[0]||this.updateTypeOrder.editState[1],
      ]
    }
  }
}
</script>

<style scoped>
.selection{
  -webkit-animation:transferHighlightIn 1s;
  animation:transferHighlightIn 1s;
  transition: all 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-selection{
  background-color: rgb(230,247,255);
}
</style>
<style>
.ant-transfer-list{
  height: unset;
}
</style>